<template>
  <div class="page">
    <div class="header">
      <el-row :gutter="20">
        <el-col :span="12">
          <div>
            <slot name="header"></slot>
          </div>
        </el-col>
        <el-col :span="12" class="global-button">
          <div>
            <slot name="global-button"></slot>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-breadcrumb
      separator=">"
      class="kylin-breadcrumb"
      v-if="$route.meta.breadcrumb"
    >
      <template v-for="item in $route.meta.breadcrumb">
        <el-breadcrumb-item
          :key="typeof item.name === 'function' ? item.id : item.name"
          v-if="item.path"
          :to="{
            path:
              typeof item.path === 'function' ? item.path($route) : item.path,
          }"
        >
          {{
            typeof item.name === "function" ? item.name($store.state.patch) : $t(item.name)
          }}
        </el-breadcrumb-item>
        <el-breadcrumb-item :key="item.name" v-else>
          {{ $t(item.name) }}
        </el-breadcrumb-item>
      </template>
    </el-breadcrumb>
    <div class="search">
      <el-row>
        <slot name="search"></slot>
      </el-row>
    </div>
    <div class="content">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style rel="stylesheet/scss" lang="scss">
.page {
  .header {
    h2 {
      margin-top: 20px;
      margin-bottom: 10px;
      font-weight: 400;
      font-size: 26px;
    }
  }
  .global-button {
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: right;
  }
  .kylin-breadcrumb {
    margin-bottom: 20px;
    margin-top: 10px;
    .el-breadcrumb__inner.is-link {
      color: #0088ce;
      font-weight: unset;
    }
    .el-breadcrumb__item:last-child {
      .el-breadcrumb__inner {
        color: #606266;
      }
    }
  }
}
</style>